<!--异步编程的处理
JavaScript的执行流程是分为"同步"与"异步"

传统的异步操作会在操作完成之后，使用回调函数传回结果，而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因：

我们一直习惯于“线性”地编写代码逻辑，但是大量异步操作所带来的回调函数，会把我们的算法分解地支离破碎。
嵌套式回调

动画为例，下一个动画要等上一个执行完毕才可以继续，流程就会写到回调里面

//执行多个动画
$('ele1').animate({
    opacity: '.5'
}, 4000, function() {
    $('ele2').animate({
        width: '100px'
    }, 2000, function() {
        $('ele3').animate({
            height: '0'
        }, 2000);
    });
});
上面的代码编程逻辑也是正确的，但是针对这样的异步嵌套的回调逻辑，当我们的嵌套越多，代码结构层级会变得越来越深。首先是阅读上会变得困难，其次是强耦合，接口变得不好扩展。我们需要一种模式来解决这种问题，这就是Promises所要做的事情。

为了让前端们从回调的地狱中回到天堂， jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂，实际上我们只要抓住核心的使用就可以了

观察右边代码：

通过$.Deferred处理过的代码，很明显没有了回调的嵌套，虽然代码量看起来多了点，但是实际上，每一个代码执行部分都被封装了起来，只留了Deferred的接口处理了，等于是我们把执行的流程控制交给了Deferred，这样的好处就是我们在写嵌套函数的时候，可以用deferred提供的管道风格编写同步代码了

dtd.then(function() {
   //操作1
}).then(function() {
   //操作2
}).then(function() {
  //操作3
})
这里要了解3个步骤
var dtd = $.Deferred();  //创建
dtd.resolve();          //成功
dtd.then()              //执行回调
具体的我们可以参考下jQuery的Deferred部分的API说明，点击此处

-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步编程的处理</title>
    <script src="../js/55ac9a860001a6c500000000.js"></script>

    <style type="text/css">
        div {
            background-color: yellow;
            width: 200px;
            height: 200px;
            text-align: center;
            border: 2px solid red;
            margin: 3px;
            font-size: 14px;
        }
        #block3,#block4{
            background-color: #CAE1FF;
        }
        button {
            font-size: 14px;
        }
    </style>
</head>
<!---->
<body>
<button>点击测试回调</button>
<button>点击测试 $.Deferred处理</button>
<br/>
<br/>
<div id="block1">block1执行动画</div>
<div id="block2">block2执行动画</div>
<div id="block3">block3执行动画</div>
<div id="block4">block4执行动画</div>

<script type="text/javascript">
    //回调处理

    $('button:first').click(function () {
        $("#block1").animate({
            width:"60%"
        },2000,function () {//嵌套回调
            $('#block2').animate({
                width:'50%'
            },2000)
        });
    });

    //jQuery 的Deferred处理
    $('button:last').click(function () {
        function animate1() {
            var dtd = $.Deferred();//创建。生成Deferred对象

            $('#block3').animate({
                width:"40%"
            },2000,function () {
                dtd.resolve();  //2成功。 改变Deferred对象的执行状态
            });
            return dtd;
        }


        function animate2() {
            var dtd = $.Deferred();

            $('#block4').animate({
                width:"30%"
            },2000,function () {
                det.resolve();
            });
            return dtd;
        }



        var anim =animate1();

        anim.then(function () {//3回调。执行回调操作
            $("#block3").text('block3 动画执行完直接结束');
            return animate2();
        }).then(function () {
            $('#block4').text('block4 动画动画直接结束');
        });
    });

</script>
</body>
</html>
